
<template>
  <view class="template-about">
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed alpha customBack>
      <view slot="back" class='tn-custom-nav-bar__back'
        @click="goBack">
        <text class='icon tn-icon-left'></text>
        <text class='icon tn-icon-home-capsule-fill'></text>
      </view>
    </tn-nav-bar>
    
	<view  :style="{marginTop: vuex_custom_bar_height + 'px'}">
		<tn-tabs-swiper ref="tabs" :list="list" :isScroll="false" :current="tabsIndex" name="tabName" @change="tabsChange"></tn-tabs-swiper>
		<swiper class="swiper__box" :current="swiperIndex" @transition="swiperTransition" @animationfinish="swiperAnimationFinish" :style="'height:' + windowHeight+''">
			<swiper-item class="swiper__item">
				<view class="tn-margin-bottom-lg" >
				  <block v-for="(item, index) in reserve" :key="index">
				    <view class="article-shadow tn-margin" @click="tn('/circlePages/reserve?id='+item.id)">
				      <view class="tn-flex">
				        <view class="image-pic tn-margin-sm"  :style="'background-image:url(' + item.url + ')'">
				          <view class="image-article">
				          </view>
				        </view>
				        <view class="tn-margin-sm tn-padding-top-xs" style="width: 100%;">
				          <view class="tn-text-lg tn-text-bold clamp-text-1 tn-text-justify">
				            {{ item.title }}
				          </view>
				          <view class="tn-flex tn-flex-row-between tn-flex-col-between tn-padding-top-xs" style="min-height: 105rpx;">
				            <text class="tn-text-df tn-color-gray clamp-text-2 tn-text-justify">
								{{ item.activityTime }}
				              {{ item.location }}
				            </text>
				            <!-- <view class="justify-content-item tn-flex tn-flex-col-center">
				              <tn-avatar-group :lists="item.reserve.image" size="sm"></tn-avatar-group>
				            </view> -->
				            <view class="justify-content-item tn-flex tn-flex-col-center">
				              <text class="tn-color-gray">{{ item.joinNum }} 人参与</text>
				            </view>
								  
				          </view>
				          <view class="tn-flex tn-flex-row-between tn-flex-col-between">
				            <view class="justify-content-item tn-text-center " style="padding-top: 5rpx;">
								
				              <text class=" tn-padding-right-xs tn-text-lg">{{ item.stateTxt }}</text>
				            </view>
				          </view>
				        </view>
				      </view>
				    </view>
				  </block>
				
				  <block v-if="reserve.length == 0" >
					  <view style="text-align: center;font-size: 12px;padding-top: 130px;">
						  <view>
							   <img src="../../../static/img/logo2.png" style="width: 80px;height: 84px;margin-bottom: 18px;opacity: 0.6;"/>
						  </view>
						  <view>
							  <text style="color: #797171;">  暂无相关活动，请积极参加~</text>
						  </view>
					  </view>
				  </block>
				</view>
			</swiper-item>
			<swiper-item class="swiper__item">
				<view class="tn-margin-bottom-lg">
				  <block v-for="(item, index) in reserve1" :key="index">
				    <view class="article-shadow tn-margin" @click="tn('/circlePages/reserve?id='+item.id)">
				      <view class="tn-flex">
				        <view class="image-pic tn-margin-sm" :style="'background-image:url(' + item.url + ')'" >
				          <view class="image-article">
				          </view>
				        </view>
				        <view class="tn-margin-sm tn-padding-top-xs" style="width: 100%;">
				          <view class="tn-text-lg tn-text-bold clamp-text-1 tn-text-justify">
				            {{ item.title }}
				          </view>
				          <view class="tn-flex tn-flex-row-between tn-flex-col-between tn-padding-top-xs" style="min-height: 105rpx;">
				            <text class="tn-text-df tn-color-gray clamp-text-2 tn-text-justify">
								{{ item.activityTime }}
				              {{ item.location }}
				            </text>
				            <!-- <view class="justify-content-item tn-flex tn-flex-col-center">
				              <tn-avatar-group :lists="item.reserve.image" size="sm"></tn-avatar-group>
				            </view> -->
				            <view class="justify-content-item tn-flex tn-flex-col-center">
				              <text class="tn-color-gray">{{ item.joinNum }} 人参与</text>
				            </view>
								  
				          </view>
				          <view class="tn-flex tn-flex-row-between tn-flex-col-between">
				            <view class="justify-content-item  tn-text-center " style="padding-top: 5rpx;">
				              <text class=" tn-padding-right-xs tn-text-lg">{{ item.stateTxt }}</text>
				            </view>
				          </view>
				        </view>
				      </view>
				    </view>
				  </block>
				 <block v-if="reserve1.length == 0" >
					  <view style="text-align: center;font-size: 12px;padding-top: 130px;">
						  <view>
							   <img src="../../../static/img/logo2.png" style="width: 80px;height: 84px;margin-bottom: 18px;opacity: 0.6;"/>
						  </view>
						  <view>
							  <text style="color: #797171;">  暂无相关活动，请积极参加~</text>
						  </view>
					  </view>
				 </block>
				</view>
			</swiper-item>
			<swiper-item class="swiper__item">
				<view class="tn-margin-bottom-lg" >
				  <block v-for="(item, index) in reserve2" :key="index">
				    <view class="article-shadow tn-margin" @click="tn('/circlePages/reserve?id='+item.id)">
				      <view class="tn-flex">
				        <view class="image-pic tn-margin-sm" :style="'background-image:url(' + item.url + ')'">
				          <view class="image-article">
				          </view>
				        </view>
				        <view class="tn-margin-sm tn-padding-top-xs" style="width: 100%;">
				          <view class="tn-text-lg tn-text-bold clamp-text-1 tn-text-justify">
				            {{ item.title }}
				          </view>
				          <view class="tn-flex tn-flex-row-between tn-flex-col-between tn-padding-top-xs" style="min-height: 105rpx;">
				            <text class="tn-text-df tn-color-gray clamp-text-2 tn-text-justify">
								{{ item.activityTime }}
				              {{ item.location }}
				            </text>
				            <!-- <view class="justify-content-item tn-flex tn-flex-col-center">
				              <tn-avatar-group :lists="item.reserve.image" size="sm"></tn-avatar-group>
				            </view> -->
				            <view class="justify-content-item tn-flex tn-flex-col-center">
				              <text class="tn-color-gray">{{ item.joinNum }} 人参与</text>
				            </view>
								  
				          </view>
				          <view class="tn-flex tn-flex-row-between tn-flex-col-between">
				            <view class="justify-content-item  tn-text-center " style="padding-top: 5rpx;">
				              <text class=" tn-padding-right-xs tn-text-lg">{{ item.stateTxt }}</text>
				            </view>
				          </view>
				        </view>
				      </view>
				    </view>
				  </block>
				  <block v-if="reserve2.length == 0" >
					  <view style="text-align: center;font-size: 12px;padding-top: 130px;">
						  <view>
							   <img src="../../../static/img/logo2.png" style="width: 80px;height: 84px;margin-bottom: 18px;opacity: 0.6;"/>
						  </view>
						  <view>
							  <text style="color: #797171;">  暂无相关活动，请积极参加~</text>
						  </view>
					  </view>
				  </block>
				</view>
			</swiper-item>
			<swiper-item class="swiper__item">
				<view class="tn-margin-bottom-lg" >
				  <block v-for="(item, index) in reserve3" :key="index">
				    <view class="article-shadow tn-margin" @click="tn('/circlePages/reserve?id='+item.id)">
				      <view class="tn-flex">
				        <view class="image-pic tn-margin-sm" :style="'background-image:url(' + item.url + ')'">
				          <view class="image-article">
				          </view>
				        </view>
				        <view class="tn-margin-sm tn-padding-top-xs" style="width: 100%;">
				          <view class="tn-text-lg tn-text-bold clamp-text-1 tn-text-justify">
				            {{ item.title }}
				          </view>
				          <view class="tn-flex tn-flex-row-between tn-flex-col-between tn-padding-top-xs" style="min-height: 105rpx;">
				            <text class="tn-text-df tn-color-gray clamp-text-2 tn-text-justify">
								{{ item.activityTime }}
				              {{ item.location }}
				            </text>
				            <!-- <view class="justify-content-item tn-flex tn-flex-col-center">
				              <tn-avatar-group :lists="item.reserve.image" size="sm"></tn-avatar-group>
				            </view> -->
				            <view class="justify-content-item tn-flex tn-flex-col-center">
				              <text class="tn-color-gray">{{ item.joinNum }} 人参与</text>
				            </view>
								  
				          </view>
				          <view class="tn-flex tn-flex-row-between tn-flex-col-between">
				            <view class="justify-content-item  tn-text-center " style="padding-top: 5rpx;">
				              <text class=" tn-padding-right-xs tn-text-lg">{{ item.stateTxt }}</text>
				            </view>
				          </view>
				        </view>
				      </view>
				    </view>
				  </block>
				  <block v-if="reserve3.length == 0" >
					  <view style="text-align: center;font-size: 12px;padding-top: 130px;">
						  <view>
							   <img src="../../../static/img/logo2.png" style="width: 80px;height: 84px;margin-bottom: 18px;opacity: 0.6;"/>
						  </view>
						  <view>
							  <text style="color: #797171;">  暂无相关活动，请积极参加~</text>
						  </view>
					  </view>
				  </block>
				</view>
			</swiper-item>
		</swiper>
	</view>
   
  </view>
</template>

<script>
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	import request from '@/common/request.js';
	export default {
	  mixins: [template_page_mixin],
	  data() {
	    return {
			windowHeight:'',
	      list: [{
	        tabName: '全部'
	      }, {
	        tabName: '待审核'
	      }, {
	        tabName: '已通过',
	        //count: 5
	      }, {
	        tabName: '已拒绝'
	      }],
	      tabsIndex: 0,
		  swiperIndex:0,
		  reserve:[],
		  reserve1:[],
		  reserve2:[],
		  reserve3:[],
		  statusTxt:["待通过申请", "已通过申请","已拒绝申请"]
	    }
	  },
	  onReady() {
	  	uni.getSystemInfo({
	  		success: res => {
	  			this.windowHeight = res.windowHeight + 'px';
	  		}
	  	});
	  },
	  onLoad() {
	  	this.initData()
	  },
	  methods: {
		  initData(){
			  let _t = this;
			  request.get("friend/wx/activity/selectMeJoinActivity/-1").then(res=>{
				  let _data = res[1]['data']
				  if(_data.code == 20000){
					  let d = _data.data
					  if(d && d.length > 0){
						  
						  d.forEach(ccc=>{
							  ccc.stateTxt= this.statusTxt[ccc.state]
							  let _img = ccc.image.split(",") || []
							  ccc.url = _img[0] || "";
							  
							  if(ccc.state == 0){
								  _t.reserve1.push(ccc)
							  }else if(ccc.state == 1){
								  _t.reserve2.push(ccc)
							  }else if(ccc.state == 2){
								  _t.reserve3.push(ccc)
							  }
						  })
						  
						  _t.reserve = d;
					  }
				  }
			  })
		  },
		  // 跳转
		  tn(e) {
		    uni.navigateTo({
		      url: e,
		    });
		  },
		 tabsChange(index) {
			this.swiperIndex = index
		  },
		  // swiper-item位置发生改变
		  swiperTransition(event) {
			this.$refs.tabs.setDx(event.detail.dx)
		  },
		  // swiper动画结束
		  swiperAnimationFinish(event) {
			const current = event.detail.current
			this.$refs.tabs.setFinishCurrent(current)
			this.swiperIndex = current
			this.tabsIndex = current
		  }
	  }
	}
</script>

<style lang="scss" scoped>
	.tn-text-df{
		line-height: 26px;;
	}
	/* 胶囊*/
	.tn-custom-nav-bar__back {
	  width: 100%;
	  height: 100%;
	  position: relative;
	  display: flex;
	  justify-content: space-evenly;
	  align-items: center;
	  box-sizing: border-box;
	  background-color: rgba(0, 0, 0, 0.15);
	  border-radius: 1000rpx;
	  border: 1rpx solid rgba(255, 255, 255, 0.5);
	  color: #FFFFFF;
	  font-size: 18px;
	  
	  .icon {
	    display: block;
	    flex: 1;
	    margin: auto;
	    text-align: center;
	  }
	  
	  &:before {
	    content: " ";
	    width: 1rpx;
	    height: 110%;
	    position: absolute;
	    top: 22.5%;
	    left: 0;
	    right: 0;
	    margin: auto;
	    transform: scale(0.5);
	    transform-origin: 0 0;
	    pointer-events: none;
	    box-sizing: border-box;
	    opacity: 0.7;
	    background-color: #FFFFFF;
	  }
	}
  .order-wrap {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--window-top));
    width: 100%;
  }

  .swiper {
	height: 100%;  
    &__box {
      flex: 1;
    }

    &__item {
      height: 100%;
    }
  }
  .image-circle{
    // padding: 95rpx;
    width: 190rpx;
    height: 190rpx;
    font-size: 40rpx;
    font-weight: 300;
    position: relative;
  }
  .image-pic{
    background-size: cover;
    background-repeat:no-repeat;
    // background-attachment:fixed;
    background-position:top;
    border-radius: 10rpx;
	width: 190rpx;
	height: 190rpx;
  }
</style>
